空白了幾天 今天完成了一個項目 就是我們有一個頁面連結底下 會區分出三個副頁面
因此我們要用 Semantic Ui Tab 來做區分

ＯＫ 那就開始囉

<div>
    <h3>
    {
      this.props.AllDiscs.filter(x => x.get('DiscID') == this.props.params.discid).getIn(['0', 'discussion_info', 'DiscName'])
    }
    </h3>

    <Menu attached='top' tabular>
        <Menu.Item key='write' 
                   active={this.state.activeItem === 'inprocess'}>
            <Icon name='write' size="large"></Icon>{t('InProcess')}
        </Menu.Item>
        <Menu.Item key='finished' 
                   active={this.state.activeItem === 'finished'}>
            <Icon name='checkmark' size="large"></Icon>{t('Finished')}
        </Menu.Item>
        <Menu.Item key='attachments' 
                   active={this.state.activeItem === 'attachment'}>
            <Icon name='attach' size="large"></Icon>{t('Attachments')}
        </Menu.Item>
    </Menu>

    <Segment attached='bottom'>
    {(() => {
            switch(this.state.activeItem) 
            {
                case 'inprocess': return <InProcessPage discid={this.props.params.discid}></InProcessPage>;
                case 'finished': return <FinishedPage discid={this.props.params.discid}></FinishedPage>;
                case 'attachment': return <AttachPage discid={this.props.params.discid}></AttachPage>;
            }
        }
    )()}
    </Segment>
</div>

你可能會覺得很奇怪 不是說要用 Tab 嗎 怎麼變成 Menu
原因是這樣的 我發現 Semantic 的 Tab 就是利用 Menu去做組合的
而且我覺得他組合起來 並沒有很好用 pane function 有點定死的感覺 而且都寫在 const 裡面
這種寫法我不喜歡

然後 重點來了 以前我都是把 跟後端要資料的方法 透過
componentWillMount()
componentDidMount()
去做呼叫

但是你在 同一個component 底下只是URL 的 Param 變化時 這一招就會無效
因為這個只有在 component 初始化的時候做一次 之後就罷工了
所以 我們做了些改變

shouldComponentUpdate(nextProps, nextState) {
   return true;
}

componentWillReceiveProps(nextProps) {
if (this.props.IsLogin && nextProps.discid !== this.props.discid) {
      let _compid = this.props.CompID;
      let _userid = this.props.UserID;
      let _token = this.props.Token;
      let _discid = nextProps.discid;
      this.props.onGetInProcess(_compid, _discid, _userid, _token);   
   }
}

我們透過 prop 設定 因為 我們把

this.props.param.discid

傳送到 component prop
所以我們就可以根據這個 來做Component 變化的通知了